<%@page language="java" pageEncoding="UTF-8"%>
<%@include file="/views/common/includetag.jsp"%>

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/jqueryplugin/upload-perfect/css/jquery.filer.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/jqueryplugin/upload-perfect/css/jquery.filer-dragdropbox-theme.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/jqueryplugin/upload-perfect/css/tomorrow.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/jqueryplugin/upload-perfect/css/custom.css">
<!--[if IE]>
	<script src="${pageContext.request.contextPath}/assets/jqueryplugin/upload-perfect/js/html5shiv.min.js"></script>
<![endif]-->


<script src="${pageContext.request.contextPath}/assets/jqueryplugin/upload-perfect/js/jquery.filer.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/assets/jqueryplugin/upload-perfect/js/prettify.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/assets/jqueryplugin/upload-perfect/js/scripts.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/assets/jqueryplugin/upload-perfect/js/custom.js" type="text/javascript"></script>

<!-- 后台顶部导航栏 -->
<div class="row back-top-title">
	<div class="col-md-12">
		<span>高级组件 - 文件上传</span>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
		<div class="panel panel-white">
			<div class="panel-body">
				<div class="tabbable partition-dark">
					<jsp:include page="advanced-uediter-tab.jsp">
						<jsp:param value="3" name="tabIndex"/>
					</jsp:include>
					
					<div class="tab-content padding20">
						<div class="alert alert-success">
							<p>
								In this example we limit our users with maximal 3 number of files, all files together must have maximal 3MB's and the file's extensions should be matched in the array(ex: ['jpg', 'png', 'gif']). We are also changig the file input to jQuery.filer default design. We also need to show the file preview in our browser before uploading the file.
							</p>
							
							<form action="${pageContext.request.contextPath}/upload/upload2" method="post" enctype="multipart/form-data">
	                             <input type="file" name="files[]" id="demo-fileInput-3" multiple="multiple">
	                             <input type="submit" class="btn-custom green" value="Submit">
	                        </form>
						</div>
						
						<div class="alert alert-success">
							<p>
								可以预览图片
							</p>
							
							<form action="${pageContext.request.contextPath}/upload/upload2" method="post" enctype="multipart/form-data">
	                            <input type="file" name="files[]" id="demo-fileInput-4" multiple="multiple">
	                            <input type="submit" class="btn-custom green" value="Submit">
                        	</form>
						</div>
						
						<div class="alert alert-success">
							<p>
								可以拖拽到特定位置上传文件
							</p>
							
							 <form action="${pageContext.request.contextPath}/upload/upload2" method="post" enctype="multipart/form-data">
	                             <input type="file" name="files[]" id="demo-fileInput-6" multiple="multiple">
	                             <input type="submit" class="btn-custom green" value="Submit">
	                        </form>
						</div>
						
						<div class="alert alert-success">
							<p>
								可以拖拽到特定位置打开文件
							</p>
							
							 <form action="${pageContext.request.contextPath}/upload/upload2" method="post" enctype="multipart/form-data">
	                             <input type="file" name="files[]" id="demo-fileInput-1" multiple="multiple">
	                             <input type="submit" class="btn-custom green" value="Submit">
	                        </form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>